<template>
	<view class="content">
		<!-- 标题栏 -->
		<uni-nav-bar class="nav-bar" title="嗨喵商城" color="#000000" statusBar="true" :border="false" left-icon="left"
			@clickLeft="back"></uni-nav-bar>
		<view class="bannerWrap">
			<swiper class="swiper" circular :autoplay="true">
				<swiper-item v-for="item in swiperList" :key="item.id" class="swipeItem">
					<image :src="item.bg_link" class="swiperImage"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="prodList" v-if="productListLen > 0">
			<view class="prodItem" v-for="item in productList" :key="item.productId">
				<image :src="item.picSmallDis" class="prodImage"></image>
				<view class="prodCt">
					<view class="prodName">
						{{item.nameDis}}
					</view>
					<view class="priceInfo">
						<view class="price">
							价格：¥{{item.price}}
						</view>
						<view class="benifitVal">
							返佣{{item.rateDis}}
						</view>
					</view>
					<view class="operate">
						<view class="benifitPrice">
							佣金：<view class="benifitMoney"><text class="unit">¥</text>{{item.benifitMoneyDis}}</view>
						</view>
						<view class="shareBtn" @click.stop="shareProduct(item)">
							<text class="iconfont icon-wechat wechatIcon"></text>
							一键分享
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="loadMore" v-if="showLoadMore">{{loadMoreText}}</view>
	</view>
</template>

<script>
	import {
		requestProdList,
		getCanrouselList
	} from '@/api/api-mall'
	import {
		useUser
	} from "@/stores/user";
	import {
		back
	} from "@/utils/navigate";

	export default {
		data() {
			return {
				swiperList: [],
				mallId: '',
				userId: '',
				productList: [],
				totalPage: 1,
				showCount: 10,
				currentPage: 1,
				loadMoreText: "加载中...",
				showLoadMore: false,
			}
		},
		computed: {
			productListLen() {
				return this.productList.length;
			}
		},
		onLoad() {
			this.initSwiperList();
			this.initProdList();
			const user = useUser();
			this.userId = user.userInfo.userId;
		},
		methods: {
			back() {
				back();
			},
			initSwiperList() {
				getCanrouselList().then((res) => {
					console.log('轮播图列表:', res);
					this.swiperList = res.data.list || [];
					this.mallId = res.data.shopId;
				})
			},
			initProdList() {
				this.productList = [];
				this.currentPage = 1;
				this.totalPage = 1;
				this.getProdList();
			},
			shareProduct(item) {
				console.log(
					`/pages/good/good?tenantId=${this.mallId}&shareId=${this.userId}&productId=${item.productId}`
				);
				const path = `/pages/good/good?tenantId=${this.mallId}&shareId=${this.userId}&productId=${item.productId}`;
				if (!this.mallId || !this.userId || !item.productId) {
					uni.showToast({
						title: '参数异常!',
						icon: 'none'
					})
					return;
				}
				uni.navigateToMiniProgram({
					appId: 'wx7239c7a2397fb19c',
					path: path,
					extraData: {},
					envVersion: "trial", // 打开正式版
					success(res) {},
					fail: function(err) {}
				})

			},
			getProdList() {
				requestProdList({
					currentPage: this.currentPage,
					showCount: this.showCount
				}).then((res) => {
					console.log(res);
					let list = res.data.data.list.map((item) => {
						let tmpName = item.name.length >= 25 ? `${item.name.slice(0, 25)}......` : item
							.name;
						let tmpPicSmall;
						let tmpRate = item.rate ? `${item.rate * 100}%` : '0%';
						let tmpBenifitMoney = (item.rate && item.price) ? (item.rate * 100) * item.price /
							100 : 0;
						if (item.pic.indexOf(',') > -1) {
							tmpPicSmall = item.pic.split(',')[0];
						} else {
							tmpPicSmall = item.pic;
						}
						return {
							nameDis: tmpName,
							picSmallDis: tmpPicSmall,
							rateDis: tmpRate,
							benifitMoneyDis: tmpBenifitMoney,
							...item
						}
					}) || [];
					this.totalPage = res.data.data.totalPage || 1;
					this.productList = this.productList.concat(list);
					console.log('商品列表', this.productList);
					this.showLoadMore = false;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 设置导航栏透明
	::v-deep .uni-navbar {
	
	  .uni-navbar__content,
	  .uni-navbar__header {
	    background-color: rgba($color: #000000, $alpha: 0) !important;
	  }
	}
	
	view {
		box-sizing: border-box;
	}

	.content {
		background-color: #F9F7F7;
	}

	.bannerWrap {
		display: flex;
		justify-content: center;
		padding-top: 0rpx;

		.swiper {
			background-color: black;
			width: 750rpx;
			height: 420rpx;
			background-color: #ffffff;

			.swipeItem {
				height: 100%;

				.swiperImage {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.loadMore {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		color: #010101;
		font-size: 24rpx;
	}

	.prodList {
		margin-top: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 40rpx;

		.prodItem {
			width: 710rpx;
			height: 256rpx;
			background: #ffffff;
			border-radius: 4rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.prodImage {
				width: 216rpx;
				height: 216rpx;
				border-radius: 4rpx;
			}

			.prodCt {
				width: 426rpx;
				height: 216rpx;
				margin-left: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.prodName {
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					line-height: 32rpx;
				}

				.priceInfo {
					display: flex;
					align-items: center;
					margin-top: 16rpx;

					.price {
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
					}

					.benifitVal {
						width: 124rpx;
						height: 30rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-image: url('https://ustatic.hudongmiao.com/joymewApp/mall/couponBg.png');
						background-size: 100% 100%;
						margin-left: 16rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: #ffffff;
					}
				}

				.operate {
					margin-top: 18rpx;
					display: flex;
					align-items: flex-end;
					justify-content: space-between;

					.benifitPrice {
						display: flex;
						align-items: flex-end;
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;

						.benifitMoney {
							display: flex;
							font-size: 48rpx;
							font-weight: 500;
							color: #FE0339;
							display: flex;
							align-items: flex-end;

							.unit {
								font-size: 28rpx;
							}
						}
					}

					.shareBtn {
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 20rpx;
						font-weight: 400;
						color: #ffffff;
						width: 144rpx;
						height: 52rpx;
						background: #58be6a;
						border-radius: 4rpx;

						.wechatIcon {
							font-size: 20rpx;
							color: #ffffff;
							margin-right: 5rpx;
						}
					}
				}
			}
		}
	}
</style>